<template>
  <div>
    <div class="operation-btn">
      <div class="dis-flex flex-x-end ">
        <el-button type="success" plain size="mini" @click="generate">生成采购单</el-button>
        <el-button type="primary" plain size="mini" icon="el-icon-edit" @click="is_edit = !is_edit">{{ is_edit?'退出':'' }}编辑</el-button>
        <el-button type="danger" size="mini" icon="el-icon-delete" @click="delBatch">删除</el-button>
      </div>
    </div>
    <Content>
      <el-table ref="table" :data="list.data" style="width: 100%" :height="minHeight" size="small" row-key="id" class="table" @selection-change="selectionChange">
        <el-table-column type="selection" width="30" :reserve-selection="true" />
        <el-table-column label="图片" width="60" fixed>
          <template slot-scope="scope">
            <el-image v-viewer :src="scope.row.imgurl" />
          </template>
        </el-table-column>
        <el-table-column label="产品名称" width="200" prop="goods_name" fixed />
        <el-table-column label="产品编码" width="120" prop="goods_sku_id" />
        <el-table-column label="颜色" width="70" prop="color_name" />
        <el-table-column label="规格" width="60" prop="spec_value" />
        <el-table-column label="商品来源" width="80">
          <template slot-scope="scope">
            <div v-if="scope.row.source == 1" class="row_div primary_row">外拿</div>
            <div v-if="scope.row.source == 0" class="row_div success_row">自产</div>
          </template>
        </el-table-column>
        <el-table-column label="计划采购数(单位)" width="120">
          <template slot-scope="scope">
            <div class="dis-flex flex-y-center">
              <el-input v-if="is_edit" v-model="scope.row.num" size="mini" @blur="blurNum(scope.row.num,scope.row.goods_sku_id)" />
              <label v-else>{{ scope.row.num }}</label>
              <label class="use_unit">{{ scope.row.use_unit }}</label>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="总库存数" width="stock" />
        <el-table-column label="库存预警下限" width="100" prop="stock_safe_down">
          <template slot="header">
            <label class="col-red">库存预警下限</label>
          </template>
        </el-table-column>
        <el-table-column label="可用库存数" width="80" prop="stock_actual" />

        <el-table-column label="采购在途数(预计到货时间)" width="160" prop="spec_value">
          <template slot-scope="scope">
            <label>{{ scope.row.stock_intransit }}</label>
            <label>{{ scope.row.stock_reserve_date }}</label>
          </template>
        </el-table-column>
        <el-table-column label="已锁定库存" width="80" prop="stock_reserve" />
        <el-table-column label="退货在途" width="80" prop="stock_return_intransit" />

        <el-table-column label="消退仓数" width="92" prop="stock_return" />
        <el-table-column label="采购周期(天)" width="110" prop="period" />
        <el-table-column label="生产周期(天)" width="110" prop="produce_period" />
        <el-table-column label="30天销量" width="80" prop="sells_30day" />
        <el-table-column label="加购件数" width="80" prop="sum_cart_num" />
        <el-table-column label="支付转化率" width="80" prop="conversion_pay">
          <template slot-scope="scope">
            {{ scope.row.conversion_pay?scope.row.conversion_pay+'%':'' }}
          </template>
        </el-table-column>
        <el-table-column label="退货率" width="80" prop="refund_rate">
          <template slot-scope="scope">
            {{ scope.row.refund_rate?scope.row.refund_rate+'%':'' }}
          </template>
        </el-table-column>
        <el-table-column label="利润" width="80" prop="profit" />
        <el-table-column label="操作" width="100" fixed="right">
          <template slot-scope="scope">
            <el-link type="primary" :underline="false">转原料</el-link>
            <el-link type="danger" :underline="false" @click="delValue(scope.row.goods_sku_id)">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
      <Pagination ref="pagination" />
    </Content>
  </div>
</template>
<script>
import { PurchaseCart } from '@/api/stock/cart'
import Pagination from '@/components/Pagination'
import { deleteValue } from '@/utils/public'
export default {
  name: 'GoodsCard',
  components: {
    Pagination
  },
  data() {
    return {
      list: {},
      pagination: {
        page: 1,
        per_page: 30
      },
      is_edit: false,
      select: [],
      minHeight: 500
    }
  },
  created() {
    this.getCart()
  },
  methods: {
    getCart() {
      const type = {
        type: 'goods'
      }
      PurchaseCart.pagePurchaseCart({ ...type, ...this.pagination }).then((res) => {
        this.list = res.data
        this.initPagination({
          page: res.data.current_page,
          total: res.data.total,
          per_page: res.data.per_page
        })
      }).catch(() => {})
    },
    // 分页
    initPagination(data) {
      this.$refs.pagination.init({ ...data, cb: (res) => {
        this.pagination = res
        this.getCart()
      } })
    },
    blurNum(num, goods_sku_id) {
      PurchaseCart.editPurchaseCart({
        sku_id: goods_sku_id,
        type: 'goods',
        num
      }).then((res) => {
        this.$message.success('修改成功')
      }).catch(() => {})
    },
    // 删除
    delBatch() {
      const id = this.select.map(val => val.goods_sku_id)
      if (!this.select.length) {
        this.$message.error('请先选择要删除的数据,在进行操作！')
        return false
      }
      this.delValue(id.join(','))
    },
    // 选择
    selectionChange(selection) {
      this.select = selection
    },
    delValue(id) {
      deleteValue({
        _this: this,
        success: (res) => {
          PurchaseCart.delPurchaseCart({
            sku_ids: id
          }).then((res) => {
            this.$message.success('删除成功')
            this.getCart()
          }).catch(() => {})
        }
      })
    },
    generate() {
      if (!this.select.length) {
        this.$message.error('请先选择要操作的数据,在进行操作！')
        return false
      }
      PurchaseCart.autoPurchaseUnify({
        type: 'goods',
        storage_sn: 'CK202107211626846892',
        data: this.select
      }).then((res) => {
        this.getCart()
        this.$emit('success', res.data.id)
      }).catch(() => {})
    }
  }
}
</script>
<style lang="scss" scoped>
.table{
  margin-top: 0px;
  .use_unit{
    margin-left: 5px;
  }
}
.operation-btn{
 position: absolute;
 right: 10px;
 top: 15px;
 background: white;
height: 40px;
z-index: 2;
 min-width: 80%;
}

</style>
